/*------------------------------------------------------------------
Sartre Skin Barber Shop
Version: 1.0.3;
Author: ThemeMountain
Copyright: ThemeMountain

[Table of contents]

1. Typography
2. Background Color & Color Classes
3. Section Padding
4. Header Styling
5. Header Logo
6. Header Navigation
7. Header Buttons, Dropdowns & Icons
8. Auxiliary Navigation
9. Title Areas
10. Slider & Parallax
11. Lightbox
12. Plugin Preloader
13. Rollovers
14. Homepage
15. About Pages
16. Contact Pages
17. Project Pages
18. Pagination
19. Fullscreen Pages
20. Blog Pages
21. Form Elements
22. Social Lists
23. Footer
24. Sidebar
25. Dividers
26. Media Element Player
27. E-Commerce
28. Component Styling
29. Resolution Media Queries

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. Typography]
*/

[class * =cobrand-] > .row:not(.flex), [class * =cobrand-] > .row:not(.flex) > .column {
    height:100%
}

[class * =cobrand-] .cobrand-content {
    width: 100%;
    height: 100%;
    display:table
}

[class * =cobrand-] .cobrand-content-inner {
    height: 100%;
    display: table-cell;
    vertical-align:middle
}

[class * =cobrand-] .cobrand {
    width: 100%;
    height: 100%;
    display:table
}

[class * =cobrand-] .cobrand-inner {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

[class * =cobrand-].left .cobrand-inner {
    text-align:left
}

[class * =cobrand-].center .cobrand-inner {
    text-align:center
}

[class * =cobrand-].right .cobrand-inner {
    text-align:right
}


.matchup {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: bold !important;
    /*margin-top: 50px !important;*/
    padding-bottom: 170px;
}


.team-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.league img {
    width: 60px !important; /* You can adjust the width as needed */
    height: auto !important;
    margin-bottom: 10px !important; /* Spacing between the image and team name */
}

.announce {
text-align: center !important;
color: #fff !important;
margin-bottom: 90px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
}

.team {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    background-color: #272727 !important;
    border-radius: 8px !important;
    text-align: center !important;
    margin: 0 20px !important;
    font-size: 19px !important;
    color: #f0f0f0 !important;
}

.versus {
    margin: 120px !important;
    font-size: 18px !important;
    color: #fbc02d !important;
}

.date {
    font-size: 18px !important;
    color: #f0f0f0 !important;
    margin-bottom: -110px !important;
}
.venue {
    font-size: 18px !important;
    color: #f0f0f0 !important;
    margin: -110px 0 !important;
    font-style: italic !important;
}

.team img {
    width: 100px !important; /* You can adjust the width as needed */
    height: auto !important;
    margin-bottom: 10px !important; /* Spacing between the image and team name */
}

.stat-inner img {
    width: 50px; /* You can adjust the width as needed */
    height: auto !important;
    margin-bottom: 10px !important; /* Spacing between the image and team name */
}

.cobrand-inner img {
    width: 50px !important; /* You can adjust the width as needed */
    height: auto !important;
    margin-bottom: 10px !important; /* Spacing between the image and team name */
}

.section-block-1,
.fullscreen-section .fullscreen-inner,
.pagination-2 .pagination-next,
.row.xlarge{
	padding-top: 4rem;
	padding-bottom: 8rem;
}

        .header-container {
            position: relative; /* This will allow us to position elements within it */
            text-align: center;
        }

        .header-image {
            position: absolute;  /* Absolute positioning allows it to overlap */
            top: 130px;  /* Align the top of the image to the top of the container */
            left: 50%;  /* Center the image horizontally */
            transform: translateX(-50%);  /* Offset the image to perfectly center */
            width: 10%;  /* Adjust the width as needed */
            max-width: 600px; /* Optional: set max width to limit size */
            height: auto; /* Maintain the aspect ratio */
            z-index: 2;  /* Ensure the image is above the header text */
        }

.cobrand {
    width: 100px !important; /* You can adjust the width as needed */
    height: auto !important;
    margin-bottom: 10px !important; /* Spacing between the image and team name */
}

.cobrand-block {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}

.adhoc {
width: 30% !important;
padding-top: 20px;
margin-bottom: -30px;
}

.whatsapp {
width: 70% !important;
margin-top: -30px;
}

.sponsor {
padding-left: 0px !important;
}

.upcoming {
color: #f0f0f0 !important;
padding-top: 10px;
margin-bottom: -15px;
}

.mob-date {
font-size: 14px !important;
color: #f0f0f0 !important;
padding-top: 30px;
}

.mob-venue {
font-size: 14px !important;
color: #f0f0f0 !important;
font-style: italic !important;
margin-top: -30px;
}


@media (min-width: 768px) {

.mob-date {
    display: none;
}

.mob-venue {
    display: none;
}

    }

@media (max-width: 768px) {
.mobs {
display: none !important;
}

.versus-mobs {
margin: 10px !important;
font-size: 12px !important;
}

.team img {
width: 50px !important;
height: auto !important;
margin-bottom: 10px !important;
}

.team {
text-align: center !important;
font-size: 14px !important;
color: #f0f0f0 !important;
}

.announce {
text-align: center !important;
color: #fff !important;
margin-bottom: 10px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
}

.matchup {
padding-bottom: 10px;
}

.row .row {
    width: auto;
    margin-right: 0rem !important;
    margin-left:0rem !important;
}
}